body{margin:0px;}
#vr #vr-clipper, #vr-container, #vr-position, #rotateX, #rotateY, #disable, .face {height:880px; width:880px; } 
#vr #vr-clipper { position: absolute; overflow: hidden; z-index: 0; 
        -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
        -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;  
} 
 
#vr #vr-container { position: relative; -webkit-perspective: 520; -moz-perspective: 520; perspective: 520; cursor: move; } 
#vr #vr-position { position: relative; 
-webkit-transform-style: preserve-3d; -webkit-transform: translateZ(529px);
-moz-transform-style: preserve-3d; -moz-transform: translateZ(529px);
 transform-style: preserve-3d; transform: translateZ(440px);
 } 
#vr #rotor-x { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } 
#vr #rotateX { position: relative; width: 100%; 
-webkit-transform-style: preserve-3d; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite;
 -moz-transform-style: preserve-3d; -moz-animation-duration: 5s; -moz-animation-iteration-count: infinite; 
 transform-style: preserve-3d; animation-duration: 5s; animation-iteration-count: infinite; 
 } 
#vr #rotor-y { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } 
#vr #rotateY { position: relative; width: 100%; -webkit-transform-style: preserve-3d; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; -moz-transform-style: preserve-3d; -moz-animation-duration: 5s; -moz-animation-iteration-count: infinite; transform-style: preserve-3d; animation-duration: 5s; animation-iteration-count: infinite; } 
#vr #cube { position: relative; width: 0; height: 0; 
margin: 0 auto; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } 
 
#vr #disable { 
	background: #fff -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.5,rgba(200,200,200,0.8)), to(rgba(80,80,80,0.8)));
	color: black;
	font-size: 18px;
	line-height: 1.3;
	opacity: 0.85;
	position: absolute;
	z-index: 10;
	text-align: center;
	-webkit-user-select: text;
} 

#vr #disable .message {
	margin-top: 100px;
	padding: 10px 100px;
}

#vr #disable .message p {
	padding-bottom: 20px;
}

/* hide the orange overlay that disables the cube for versions of Safari that support 3-d transforms */ 
@media screen and (-webkit-transform-3d) { 
	#vr #disable { display: none; }
} 
 
#vr .face{display:block; position: absolute; left: -440px;  width: 880px;   height:880px;
-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } 
 
/* left */ 
#vr #face1 { -webkit-transform: translate3d(-439.5px, 0, 0) rotate3d(0, 1, 0, 90deg);
			    -moz-transform: translate3d(-439.5px, 0, 0) rotate3d(0, 1, 0, 90deg);
			         transform: translate3d(-439.5px, 0, 0) rotate3d(0, 1, 0, 90deg); } 
 
/* back */ 
#vr #face2 { -webkit-transform: translate3d(0, 0, -439.5px);
	 		 	-moz-transform: translate3d(0, 0, -439.5px);
	 		 		 transform: translate3d(0, 0, -439.5px); } 
 
/* right */ 
#vr #face3 { -webkit-transform: translate3d(439.5px, 0, 0) rotate3d(0, 1, 0, -90deg);
	 		 	-moz-transform: translate3d(439.5px, 0, 0) rotate3d(0, 1, 0, -90deg); 
			 		 transform: translate3d(439.5px, 0, 0) rotate3d(0, 1, 0, -90deg); } 
 
/* front */ 
#vr #face4 { -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, -439.5px);
				-moz-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, -439.5px);
			 		 transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, -439.5px); } 
 
/* top */ 
#vr #face5 { -webkit-transform: translate3d(0, -439.5px, 0) rotate3d(1, 0, 0, -90deg) rotate3d(0, 0, 1, 90deg) rotate3d(0, 0, 1, -180deg);
			 	-moz-transform: translate3d(0, -439.5px, 0) rotate3d(1, 0, 0, -90deg) rotate3d(0, 0, 1, 90deg) rotate3d(0, 0, 1, -180deg);
			 		 transform: translate3d(0, -439.5px, 0) rotate3d(1, 0, 0, -90deg) rotate3d(0, 0, 1, 90deg) rotate3d(0, 0, 1, -180deg); } 
 
/* bottom */ 
#vr #face6 { -webkit-transform: translate3d(0, 439.5px, 0) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 90deg);
				-moz-transform: translate3d(0, 439.5px, 0) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 90deg);
					 transform: translate3d(0, 439.5px, 0) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 90deg); } 
 
